<template>
  <div>
    <el-breadcrumb class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>招聘会中心</el-breadcrumb-item>
    </el-breadcrumb>

    <el-form :inline="true" :model="jobFair" class="demo-form-inline">
      <el-form-item label="招聘会名称">
        <el-input v-model="jobFair.jobfairName" placeholder="招聘会名称"></el-input>
      </el-form-item>
      <el-form-item label="起始日期内">
        <el-date-picker
                v-model="startAndStopTime"
                type="daterange"
                @change="changeTime"
                :unlink-panels=true
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getJobFair">查询</el-button>
        <el-button type="primary" icon="el-icon-edit" circle @click="handleAdd"></el-button>
      </el-form-item>
      <el-table
              v-loading="loading"
              :data="pageInfo.list"
              style="width: 100%"
              :stripe=true
              :border=true
              height="500">
        <el-table-column
                label="招聘会图片"
                prop="companyImg"
                width="100">
          <template width="90" slot-scope="scope">
            <img v-if="scope.row.jobfairImg" :src="$config.url+scope.row.jobfairImg" style="height: 60px;width: 60px">
            <div v-else><img  src="../../hrWork/img/noImg.gif" ></div>
          </template>
        </el-table-column>
        <el-table-column
                prop="jobfairName"
                label="招聘会名称"
                width="350">
        </el-table-column>
        <el-table-column
                prop="createPerson"
                label="发布人"
                width="120">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址"
                width="220">
        </el-table-column>
        <el-table-column
                label="状态"
                width="100">
          <template slot-scope="scope">
            <el-tag v-if=" compareDate(makeDate(scope.row.startTime),makeDate(new Date()))" type="info">还未开始</el-tag>

            <el-tag v-if="compareDate(makeDate(new Date()),makeDate(scope.row.startTime))&&compareDate(makeDate(scope.row.stopTime),makeDate(new Date()))"
                    type="success">正在进行中</el-tag>

            <el-tag v-if="compareDate(makeDate(new Date()),makeDate(scope.row.stopTime))" type="warning">已结束</el-tag>
          </template>
        </el-table-column>
        <el-table-column
                label="起始时间"
                width="220">
          <template slot-scope="scope">
            <span >{{ makeSimpleDate(scope.row.startTime)}}</span>至
            <span >{{ makeSimpleDate(scope.row.stopTime)}}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="220" fixed="right">
          <template slot-scope="scope">
            <el-button
                    type="success"
                    size="mini"
                    @click="handleUpdate(scope.row.jobfairId)">编辑</el-button>
            <el-button
                    size="mini"
                    type="warning"
                    @click="JobFairCompany(scope.row.jobfairId)">查看参展企业</el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-form>
    <div style="float: right">
      <el-pagination
              background
              layout="prev, pager, next"
              :total="pageInfo.total"
              :page-size="pageInfo.pageSize"
              @current-change="handlePage"
      >
      </el-pagination>
    </div>

    <!--弹窗：预览简历-->
    <el-dialog :visible.sync="isShow" style="" @close="eidtDialogClosed">
      <JobFairCompany v-if="refsh" :jobfairId="jobfairId"></JobFairCompany>
    </el-dialog>

  </div>
</template>

<script>
  import JobFairCompany from "../../jobFair/JobFairCompany"
  import {makeSimpleDate,makeDate,compareDate} from "../../../common/js/dateformat"

  export default {
    name: "job-fair",
    components:{
      JobFairCompany,
    },
    data(){
      return {
        refsh:true,
        isShow:false,
        loading:false,
        pageIndex:1,
        pageInfo:{},
        startAndStopTime:'',
        jobfairId:'',
        jobFair:{
          jobfairName:'',
          startTime:'',
          stopTime:''
        }
      }
    },
    created(){
      this.getJobFair();
    },
    methods:{
      getJobFair(){
        this.loading=true;
        this.$ajax.post(this.$config.url + `jobfair/selJobFair/${this.pageIndex}`,this.jobFair
        ).then(res => {
          this.pageInfo = res.data;
          this.loading = false;
        }).finally(() => {
        })
      },

      handleAdd(){
        this.$router.push("adminJobFairAdd")
      },

      changeTime(val){
        if(val){
          this.jobFair.startTime=val[0];
          this.jobFair.stopTime=val[1];
        }else{
          this.jobFair.startTime='';
          this.jobFair.stopTime='';
        }
      },

      handleUpdate(jobfairId){
        this.$router.push({
          path:'adminJobFairUpdate',
          query:{jobfairId:jobfairId}
        })
      },
      JobFairCompany(jobfairId){
        this.refsh = false
        this.$nextTick(() => {
          this.refsh = true
        })
        this.jobfairId=jobfairId;
        this.isShow=!this.isShow;
      },
      makeSimpleDate(date) {
        return makeSimpleDate(date)
      },
      makeDate(date){
        return makeDate(date)
      },
      compareDate(date1,date2){
        console.log(date1+"|"+date2+"|"+compareDate(date1,date2));
        return compareDate(date1,date2);
      },
      handlePage(val) {
        //console.log(val)
        this.pageIndex = val
        //加载数据
        this.getJobFair()
      },
    }
  }
</script>

<style scoped>

</style>